<template>
	<div class="side-bar" :style="{ width: direction == 'row' ? '100%' : 'auto' }" ref="navBarRef">
		<div class="menu" :style="{ 'flex-direction': direction == 'row' ? 'row' : 'column' }">
			<div
				class="menu-item"
				v-for="item in items"
				@click="clickItem(item)"
				:class="{
					'row-item': direction == 'row',
					'not-hasImg': !item.imgUrl,
				}"
				:style="{
					'background-image': `url(${activeItem.id == item.id ? item.activeBgImgUrl : item.activeBgImgUrl})`,
				}"
			>
				<img
					:src="activeItem.id == item.id ? item.activeImgUrl : item.imgUrl"
					alt=""
					class="item-img"
					v-if="item.imgUrl"
				/>
				<span class="item-title" :class="{ 'active-title': activeItem.id == item.id, 'is-hasImg': item.imgUrl }">{{
					item.title
				}}</span>
			</div>
		</div>
	</div>
</template>
<script lang="ts">
	export default {
		name: 'navBar',
	}
</script>
<script setup lang="ts">
	import { onMounted, ref } from 'vue'
	import { pxToRem, requireImg } from '@/utils/common'
	interface Item {
		id: number
		title: string
		activeImgUrl?: string
		imgUrl?: string
		activeBgImgUrl?: string
		bgImgUrl?: string
	}
	interface Props {
		direction?: 'row' | 'column'
		top?: number
		left?: number
		items: Item[]
		defaultKey?: number
		activeItemClass?: string
	}
	const props = withDefaults(defineProps<Props>(), {
		direction: 'row',
		top: 100,
		left: 0,
		items: () => {
			return [
				{
					id: 0,
					title: '全局总览',
					activeImgUrl: requireImg('vite.svg'),
					imgUrl: requireImg('vite.svg'),
				},
				{
					id: 1,
					title: '全局总览',
					activeImgUrl: requireImg('vite.svg'),
					imgUrl: requireImg('vite.svg'),
				},
				{
					id: 2,
					title: '全局总览',
					activeImgUrl: requireImg('vite.svg'),
					imgUrl: requireImg('vite.svg'),
				},
				{
					id: 3,
					title: '全局总览',
					activeImgUrl: requireImg('vite.svg'),
					imgUrl: requireImg('vite.svg'),
				},
			]
		},
		defaultKey: -1,
		activeItemClass: '',
		itemStyle: () => ({}),
		itemActiveStyle: () => ({}),
	})
	const emits = defineEmits(['click-item', 'default-key'])
	const activeItem = ref<Item | { [key: string]: any }>({})
	const clickItem = (item: Item) => {
		if (activeItem.value.title == item.title) {
			activeItem.value = {}
			emits('click-item', item, false)
		}
		activeItem.value = item
		emits('click-item', item, true)
	}
	const navBarRef = ref()
	onMounted(() => {
		activeItem.value = props.items.find((item) => item.id == props.defaultKey) ?? {}
		navBarRef.value.style.top = pxToRem(props.top!)
		navBarRef.value.style.left = pxToRem(props.left!)
	})
</script>
<style scoped lang="scss">
	.side-bar {
		position: absolute;
		font-size: 16px;
		z-index: 2;
		.menu {
			display: flex;
			margin: 0 auto;
			flex-direction: column;
			justify-content: center;
			.menu-item {
				margin: 15px 0;
				width: 100px;
				display: flex;
				flex-direction: column;
				align-items: center;
				cursor: pointer;
				justify-content: center;
				background-size: 100% 100%;
				.active-title {
					color: #02a2f8;
				}
			}
			.row-item {
				margin: 0 10px;
			}
		}
	}

	.is-hasImg {
		margin-top: 10px;
	}
	.not-hasImg {
		padding: 5px 0;
	}
</style>
